<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/user.css">
</head>


<body>

<div id="app">
  <h1>用户列表数据</h1>
  <table>

    <thead >
    <tr>
      <th>ID</th>
      <th>用户名</th>
      <th>密码</th>
      <th>昵称</th>
      <th>年龄</th>
      <th>修改时间</th>
    </tr>
    </thead>

    <tbody>
    <!--      {{ userList[0].username }}-->
    <!--          <tr   v-for="user in userList" >-->
    <!--              <td>{{ user.SerialNumber }}</td>-->
    <!--              <td>{{ user.username }}</td>-->
    <!--              <td>{{ user.password }}</td>-->
    <!--              <td>{{ user.nickname }}</td>-->
    <!--              <td>{{ user.age }}</td>-->
    <!--              <td>{{ user.updateTime }}</td>-->
    <!--          </tr>-->

      <tr v-for="user in userList">
        <td>{{ user.SerialNumber }}</td>
         <td>{{ user.username }}</td>
         <td>{{ user.password }}</td>
         <td>{{ user.nickname }}</td>
         <td>{{ user.age }}</td>
         <td>{{ user.updateTime }}</td>
      </tr>

    </tbody>

  </table>

</div>
<!--引入axios-->
<script src="./js/axios.min.js"></script>
<script type="module">
  import { createApp } from './js/vue.esm-browser.js'
  createApp({
    data(){
      userList:[]

    },
    methods:{
      async getListArray(){
        const result =  await axios.get('/list');
        this.userList = result.data;

        console.log("result-----------》》》》》", this.userList);
      },
      async getHeroList(){
        const result =  await axios.get('/hero');
        this.userList = result.data;
        console.log("result-----------》》》》》", this.userList);
      }
    },
    mounted(){

      // this.getListArray();
      this.getHeroList();

    }
  }).mount("#app")


</script>


</body>
</html>